<script setup lang="ts">
    import { useRoute, useRouter } from "vue-router";
    import YunButton from "./YunButton.vue";

    const $route = useRoute();
    const $router = useRouter();

    const map = {
        "/": ["Guide", "/guide"],
        "/guide": ["Back", "/"],
    };
    const handleButton = () => {
        $router.push(map[$route.path as keyof typeof map][1]);
    };
</script>

<template>
    <header class="yun-headerbar">
        <h1>Online Wordle Game</h1>
        <div class="headerbar__right">
            <YunButton style="margin-right: 16px">Start a New Game</YunButton>
            <YunButton
                style="margin-right: 16px"
                @click="handleButton"
            >
                {{ map[$route.path as keyof typeof map][0] }}
            </YunButton>
        </div>
    </header>
</template>

<style lang="scss" scoped>
    header.yun-headerbar {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 4px 16px;
        border-bottom: 1px solid #999;

        h1 {
            margin: 4px 0;
        }

        div.headerbar__right {
            margin-left: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }
    }
</style>
